body {
    margin: 0;
}

.page {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background: #372e69;
    background: linear-gradient(180deg, #2c245c 0%, #60549a 100%);
    // background-image: url('../../resource/level/background.png');
    background-size: 100% 100%;

    div {
        position: relative;
        z-index: 10;
    }

    &::before {
        position: fixed;
        top: 353px;
        left: 60px;
        display: block;
        width: 239px;
        height: 239px;
        background: #b3a9dd;
        border-radius: 50%;
        opacity: 0.5;
        filter: blur(60px);
        // height: 100vh;
        // background-image: url(../../resource/level/background.png);
        // background-size: 100% 80%;
        // background-repeat: no-repeat;
        content: '';
    }

    .top_view {
        width: 184px;
        height: 52px;
        margin: 0 auto;
        padding-top: 4%;
        color: #fff;
        font-size: 34px;
        font-family: YouSheBiaoTiHei;
        line-height: 52px;
        text-align: center;
        text-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
    }

    div:nth-child(2) {
        display: flex;
        justify-content: center;

        img {
            width: 330px;
            height: 38%;
            margin-top: 1%;
        }
    }

    .content {
        width: 328px;
        height: 477px;
        margin: 0 auto;
        margin-top: 2%;
        border: 2px dashed #91908f;
        border-radius: 8px;

        .career {
            position: relative;
            width: 100%;
            height: 16%;
            margin-top: 5%;

            .hollow {
                position: absolute;
                top: 6%;
                left: 4%;
                z-index: 99;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                border: 1px solid #0f0600;
                border-radius: 15px;
            }

            .solid {
                position: absolute;
                top: 6%;
                left: 5%;
                width: 24px;
                height: 24px;
                background: #4fdd94;
                border-radius: 15px;
            }

            .title {
                position: absolute;
                top: 8%;
                left: 16%;
                width: 265px;
                color: #fff;
                font-weight: 600;
                font-size: 16px;
            }

            .feature {
                justify-content: flex-start;
                width: 100%;
                height: 40px;
                // position: absolute;
                // top: 35%;
                // left: 13%;
                margin-top: 8px;
                color: rgba(255, 255, 255, 0.7);
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
            }
        }
    }

    div:last-child {
        width: 100vw;
        height: 20px;
    }
}
